<script>
  window.onload = function() {
    document.getElementById("nav-toggle").onclick = function() {
      document.getElementById("nav-content").classList.toggle("hidden");
    };

    var donate = document.getElementById("btn-donate");
    if (donate) {
      donate.onclick = function() {
        document.getElementById("donate-image").classList.remove("hidden");
        donate.classList.add("hidden");
      };
    }

    var hostname = window.location.hostname;
    var divs = document.querySelectorAll('a[href^="http"]');
    [].forEach.call(divs, function(div) {
      url = div.getAttribute("href");
      var domain = url
        .replace("http://", "")
        .replace("https://", "")
        .split(/[/?#:]/)[0];
      if (domain !== hostname) {
        div.setAttribute("target", "_blank");
      }
    });
  };

  /* Progress bar */
  //Source: https://alligator.io/js/progress-bar-javascript-css-variables/
  var h = document.documentElement,
    b = document.body,
    st = "scrollTop",
    sh = "scrollHeight",
    progress = document.querySelector("#progress"),
    scroll;
  var scrollpos = window.scrollY;
  var header = document.getElementById("header");
  var navcontent = document.getElementById("nav-content");

  document.addEventListener("scroll", function() {
    /*Refresh scroll % width*/
    scroll = ((h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight)) * 100;
    progress.style.setProperty("--scroll", scroll + "%");

    /*Apply classes for slide in bar*/
    scrollpos = window.scrollY;

    if (scrollpos > 10) {
      navcontent.classList.remove("bg-gray-100");
    } else {
      navcontent.classList.add("bg-gray-100");
    }
  });
</script>
